<template>
  <a-modal
    :visible="show"
    width="70vw"
    height="60vh"
    :bodyStyle="{ padding: '10px' }"
    title="采购计划号选择器"
    @ok="handleOk"
    @cancel="handleClose"
    :maskClosable="false"
    :key="show"
  >
    <div class="filter-container">
      <a-form-model ref="ruleForm" :laba-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="handleSearch">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="采购计划号">
              <a-input v-model="searchForm.planNum" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label-width="0">
              <a-button type="primary" @click="handleSearch">查询</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      :scroll="{ x: '100%' }"
      class="hte-table-content"
      :columns="columns"
      :data-source="records"
      rowKey="id"
      bordered
      :pagination="false"
      :customRow="customRow"
    >
      <template slot="planOrdertypeRender" slot-scope="text, record">
        <div v-for="item in codesMap.plan_order_type" :key="item.id">
          <span v-if="item.code+'' == record.planOrdertype">
            {{ item.name }}
          </span>
        </div>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      :default-current="1"
      :total="searchForm.total"
      @change="pageChange"
      @showSizeChange="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条记录`"
    />
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
export default {
  name: 'MaterialsSap',
  props: {
  },
  components: {},
  data() {
    return {
      records: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      columns: [
        {
          title: '采购计划号',
          dataIndex: 'planNum',
          width: '60px',
          align: 'center',
        },
        {
          title: '计划单类型',
          dataIndex: 'planOrdertype',
          width: '60px',
          align: 'center',
          scopedSlots: { customRender: 'planOrdertypeRender' },
        },
        {
          title: '计划人',
          dataIndex: 'planPerson',
          width: '80px',
          align: 'center',
        },
      ],
      urls: {
        psCodes: '/hte/contract/codes',
        getPlanNum: '/buyplan/planNumByPlanPerson',
      },
      searchForm: {
        costType: '3',
        total: 0,
        pageNo: 1,
        pageSize: 20,
      },
      listLoading: false,
      selectedRow: {},
      codesMap: {},
      show:false
    }
  },
  mounted() {},
  methods: {
    open() {
      this.fetchPsCode()
      this.fetchData()
      this.show = true
    },
    pageChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'pageNo', pageNo)
      this.fetchData()
    },
    onShowSizeChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageNo', 1)
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.fetchData()
    },
    fetchData() {
      postAction(this.urls.getPlanNum, this.searchForm)
        .then((response) => {
          if (response.code === 200) {
            this.records = response.result.records
            this.$set(this.searchForm, 'total', response.result.total)
            if (this.records.lengt <= 0) {
              this.$message.warning('未在HIP数据库中找到相关采购计划')
            }
          } else {
            this.$message.error('查询数据失败')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleSearch() {
      this.searchForm.page = 1
      this.fetchData()
    },
    handleClose() {
       this.show = false
      this.$emit('close')
    },
    customRow(record) {
      return {
        on: {
          dblclick: (event) => {
            this.selectedRow = {}
            this.show = false
            this.$emit('close', record)
          },
          click: (event) => {
            this.selectedRow = record
          },
        },
      }
    },
    handleOk() {
      this.show = false
      this.$emit('close', this.selectedRow)
    },
    fetchPsCode() {
      postAction(this.urls.psCodes, { codes: ['plan_order_type'] }).then((res) => {
        if (res.success) {
          this.codesMap = res.result
        }
      })
    },
  },
}
</script>

<style scoped>
.demo-table-expand .a-form-model-item {
  margin-right: 0;
  margin-bottom: 0px;
}
.demo-table-expand span {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-form-model-item--mini .a-form-model-item__label {
  color: #606266 !important;
  font-size: 12px !important;
  font-weight: normal;
}
.el-table >>> .el-table__expanded-cell[class*='cell'] {
  padding: 0px 0px 10px 0px;
}

.expand-title {
  height: 30px;
  line-height: 30px;
  background-color: #f1f1f1;
  padding-left: 50px;
  margin-bottom: 5px;
  font-size: 12px;
}
.a-form-model-item >>> .a-form-model-item__content {
  height: 36px;
}
.ellipse-tooltips {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipse-tooltips span {
  width: unset !important;
}
.el-range >>> .el-range-separator {
  width: 20px;
}
</style>

